<template>
  <div class="left-style">
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/left-1.png" alt="" />
      </div>
      <div class="side-content p-relative">
        <NewPieChart :loading="true" width="100%" height="100%" :islegendShow="false" :color="colorPie" :chartData="typePieData" />
        <div class="chart-title">
          <div class="one-title">总经营数</div>
          <div><NumberAnimate :num="7690" class="tow-title" /></div>
        </div>
      </div>
    </div>
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/left-2.png" alt="" />
      </div>
      <div class="side-content left-tow-side-content">
        <div class="left-tow-side-item margin-right-15 no-warp">
          <img src="../../../assets/images/screen/jyz.png" alt="" class="img-left-tow" />
          <div class="font-size12 flex-1 felx-column">
            <div class="font-size12">经营者</div>
            <div class="font-size16 small-num-to-14"><span>27212</span>&emsp;<span>30%</span></div>
          </div>
        </div>
        <div class="left-tow-side-item no-warp">
          <img src="../../../assets/images/screen/jydw.png" alt="" class="img-left-tow" />
          <div class="font-size12 flex-1 felx-column">
            <div class="font-size12">经营者</div>
            <div class="font-size16 small-num-to-16"><span>27212</span>&emsp;<span>30%</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/left-3.png" alt="" />
      </div>
      <div class="side-content">
        <NewBarChart
          :loading="true"
          with="100%"
          :legendTitles="['房源数', '住客数']"
          :xAxisData="['2时', '4时', '6时', '12时', '14时', '16时', '18时', '20时', '0时']"
          :total="100000"
          :chartData="[
            [100, 110, 200, 700, 840, 960, 1027, 1200, 966],
            [800, 600, 2230, 1700, 2240, 2100, 2110, 2101, 2051],
          ]"
      /></div>
    </div>
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/left-4.png" alt="" />
      </div>
      <div class="side-content">
        <TableScroll :tableColumns="performanceColumns" :info="performanceData" v-if="performanceData.length > 0">
          <template #pm="{ data, index }">
            <span v-if="index === 0"
              ><img src="@/assets/images/screen/num-1.png" alt="" style="vertical-align: -4px; height: 18px; width: 18px"
            /></span>
            <span v-else-if="index === 1"
              ><img src="@/assets/images/screen/num-2.png" alt="" style="vertical-align: -4px; height: 18px; width: 18px"
            /></span>
            <span v-else-if="index === 2"
              ><img src="@/assets/images/screen/num-3.png" alt="" style="vertical-align: -4px; height: 18px; width: 18px"
            /></span>
            <span v-else-if="index === 3"
              ><img src="@/assets/images/screen/num-4.png" alt="" style="vertical-align: -4px; height: 18px; width: 18px"
            /></span>
            <span v-else-if="index === 4"
              ><img src="@/assets/images/screen/num-5.png" alt="" style="vertical-align: -4px; height: 18px; width: 18px"
            /></span>
            <span v-else>{{ index + 1 }}</span>
          </template>
          <!-- <template #sj="{ data }">
            <span style="color: #fff">{{ data }}起</span>
          </template> -->
        </TableScroll>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Left" setup>
  import { ref } from 'vue';
  import NewPieChart from './NewPieChart.vue';
  import NewBarChart from './NewBarChart.vue';
  import TableScroll from './TableScroll.vue';
  import NumberAnimate from './NumberAnimate.vue';
  import { performanceColumns } from '../data';
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
  });
  const colorPie = ref(['#FFD523', '#FF7F34', '#4BFFAD', '#2F5DFF', '#40B0FF', '#FF4040', '#876629']);
  const typePieData = ref([
    { value: 902, name: '嘉善县' },
    { value: 344, name: '秀洲区' },
    { value: 1572, name: '南湖区' },
    { value: 317, name: '桐乡市 ' },
    { value: 1369, name: '海宁县' },
    { value: 289, name: '海盐县' },
    { value: 1062, name: '平湖市' },
  ]);
  const performanceData = ref([
    { fwdz: '222', xm: '', createTime: '11' },
    { fwdz: '111', xm: '', createTime: '11' },
    { fwdz: '333', xm: '', createTime: '11' },
    { fwdz: '4444', xm: '', createTime: '11' },
    { fwdz: '555', xm: '', createTime: '11' },
    // { fwdz: '6666', xm: '', createTime: '11' },
    // { fwdz: '77', xm: '', createTime: '11' },
    // { fwdz: '88', xm: '', createTime: '11' },
    // { fwdz: '99', xm: '', createTime: '11' },
  ]);
</script>
<style scoped lang="less">
  .left-style {
    line-height: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 2fr 3fr 3fr;
    grid-gap: 14px;
    // height: 834px;
    height: 100%;
    color: #fff;
    font-size: 16px;
    .side-content {
    }
    .left-tow-side-content {
      padding: 20px 16px !important;
      //background: transparent !important;
      .left-tow-side-item {
        height: 100%;
        background: #022c5f;
        padding-left: 10px;
        flex: 1;
        display: flex;
        align-items: center;
        line-height: 1.4;
      }
      .img-left-tow {
        width: clamp(41px, 2.29vw, 54px);
        height: clamp(43px, 2.4vw, 57px);
        margin-right: 10px;
      }
    }
    .chart-title {
      position: absolute;
      left: 30%;
      text-align: center;
      transform: translate(-50%);
      .one-title {
        font-weight: 500;
        font-size: 14px;
        color: #64a7f6;
      }
      .tow-title {
        font-weight: bold;
        font-size: 28px;
        background: linear-gradient(90deg, #ffffff 0%, #96cef7 100%);
        -webkit-background-clip: text; /* 裁剪背景到文字（兼容WebKit浏览器） */
        background-clip: text;
        color: transparent;
      }
    }
    .left-tow-side-content {
      color: #dbf0ff;
    }
  }
</style>
